<template>
  <div class="member-list">
    <a-form class="search-form">
      <a-row :gutter="24">
        <a-col :span="3">
          <a-button type="primary" style="margin-bottom: 12px;">
            <a-icon type="plus-circle"/>新增省级分公司
          </a-button>
        </a-col>
      </a-row>
      <a-row :gutter="gutter">
        <a-col :lg="6" :xl="6" :xxl="4">
          <a-form-item label="所属大区">
            <a-select v-model="selectArea">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="1">华东</a-select-option>
              <a-select-option value="2">华北</a-select-option>
              <a-select-option value="3">华南</a-select-option>
              <a-select-option value="4">华中</a-select-option>
              <a-select-option value="5">东北</a-select-option>
              <a-select-option value="6">西北</a-select-option>
              <a-select-option value="7">西南</a-select-option>
              <a-select-option value="8">港澳台</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="6" :xl="6" :xxl="5">
          <a-form-item label="省份">
            <a-select v-model="provinceId">
              <a-select-option
                :value="item.id"
                v-for="item in provinceArr"
                :key="item.id"
              >
              {{item.name}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="12" :xxl="7">
          <a-form-item label="入驻时间">
            <a-range-picker
              :placeholder="['开始时间', '结束时间']"
              class="select-range-time"
              style="width: 100%"
              v-model="createTime"
              @change="getCreateTime"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="8">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" class="l-select" v-model="searchType">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">省级分公司ID</a-select-option>
                <a-select-option value="2">省级分公司编号</a-select-option>
                <a-select-option value="3">省级分公司名称</a-select-option>
                <a-select-option value="4">省级分公司手机号</a-select-option>
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="keywords"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="6" :xxl="4">
          <div class="top-btns">
            <a-button type="primary" html-type="submit" @click="searchListData">查询</a-button>
            <a-button html-type="reset" @click="resetList">重置</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="brandListData"
        rowKey="id"
        :pagination="pagination"
        :loading="loading"
        :scroll="scrollX"
      >
        <span slot="is_commission" slot-scope="">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            disabled
          />
        </span>
        <span slot="is_enable" slot-scope="">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            disabled
          />
        </span>
        <span slot="action" slot-scope class="action-wrap">
          <a>查看详情</a>
        </span>
      </a-table>
      <pagination
        :total="total"
        @loadDataList="pageInit"
        ref="pageBand"
      />
    </div>
  </div>
</template>
<script>
import { searchBranch } from '../../store/provinceApi.js'
import { province } from '../../store/action.js'
export default {
  data () {
    return {
      fieldNames: { label: 'name', value: 'id', children: 'children' },
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      total: 0,
      start_time: 0,
      end_time: 0,
      keywords: '',
      pagination: false,
      loading: false,
      scrollX: {},
      searchType: '0',
      createTime: [],
      createPlace: [],
      provinceId: 0,
      selectArea: '0',
      columns: [
        {
          dataIndex: 'index',
          title: '序号',
          fixed: 'left',
          width: 60
        },
        {
          title: '省级分公司id',
          dataIndex: 'id'
        },
        {
          title: '省级分公司编号',
          dataIndex: 'branch_no'
        },
        {
          title: '省级分公司姓名',
          dataIndex: 'branch_name'
        },
        {
          title: '省级分公司手机号',
          dataIndex: 'phone'
        },
        {
          title: '加盟费(元)',
          dataIndex: 'participation'
        },
        {
          title: '保证金(元)',
          dataIndex: 'deposit'
        },
        {
          title: '余额(元)',
          dataIndex: 'balance'
        },
        {
          title: '省份',
          dataIndex: 'province'
        },
        {
          title: '大区',
          dataIndex: 'area'
        },
        {
          title: '入驻时间',
          dataIndex: 'created_at'
        },
        {
          title: '分润状态',
          dataIndex: 'is_commission',
          scopedSlots: { customRender: 'is_commission' }
        },
        {
          title: '账号状态',
          dataIndex: 'is_enable',
          scopedSlots: { customRender: 'is_enable' }
        },
        {
          title: '操作',
          fixed: 'right',
          width: 120,
          scopedSlots: { customRender: 'action' }
        }
      ],
      brandListData: [],
      options: [],
      provinceArr: []
    }
  },
  mounted() {
    province().then(res => {
      this.provinceArr = res.data
      this.provinceArr.unshift({
        id: 0,
        name: '全部'
      })
      // console.log(this.provinceArr)
    })
  },
  methods: {
    // loadData(selectedOptions) {
    //   const pitem = selectedOptions[0]
    //   const citem = selectedOptions[1]
    //   if (citem) {
    //     citem.loading = true
    //     district(citem.id).then(res => {
    //       citem.loading = false
    //       let array = []
    //       for (let i = 0; i < res.data.length; i++) {
    //         array.push({
    //           ...res.data[i]
    //         })
    //       }
    //       citem.children = array
    //       this.options = [...this.options]
    //     })
    //   } else {
    //     pitem.loading = true
    //     city(pitem.id).then(res => {
    //       pitem.loading = false
    //       let array = []
    //       for (let i = 0; i < res.data.length; i++) {
    //         array.push({
    //           ...res.data[i],
    //           isLeaf: false
    //         })
    //       }
    //       pitem.children = array
    //       this.options = [...this.options]
    //     })
    //   }
    // },
    // selectPlace(value) {
    //   console.log(value)
    //   this.provinceId = value[0]
    //   this.cityId = value[1]
    //   this.districtId = value[2]
    // },
    // 列表和筛选接口
    pageInit(info) {
      this.loading = true
      var data = {
        areaId: this.selectArea,
        provinceId: this.provinceId,
        searchType: this.searchType,
        startTime: this.start_time,
        endTime: this.end_time,
        name: this.keywords,
        page: info.page,
        num: info.pageSize
      }
      if (this.keywords !== '') {
        data.name = this.keywords
      }
      // if (this.provinceId != '') {
      //   data.provinceId = this.provinceId
      // }
      searchBranch(data).then(res => {
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.brandListData = array
        this.total = res.data.total_num
        if (res.data.list.length > 0) {
          this.scrollX = { x: 2000 }
        } else {
          this.scrollX = {}
        }
        this.loading = false
      })
    },
    // 按条件查询
    searchListData() {
      this.$refs.pageBand.getData()
    },
    // 重置
    resetList() {
      this.searchType = '0'
      this.createTime = []
      this.createPlace = []
      this.provinceId = '0'
      this.cityId = ''
      this.districtId = ''
      this.start_time = 0
      this.end_time = 0
      this.selectArea = '0'
      this.keywords = ''
      this.$refs.pageBand.getData()
    },
    // 获取时间戳
    getCreateTime(date, str) {
      if (str[0] && str[1]) {
        this.start_time = new Date(str[0] + ' 00:00:00').getTime() / 1000
        this.end_time = new Date(str[1] + ' 23:59:59').getTime() / 1000
      } else {
        this.start_time = 0
        this.end_time = 0
      }
    }
  }
}
</script>
<style>
</style>
